<!--个股页面和行情页面的详情-->
<div class="wrapper" *ngIf="place==='stock' || place==='quote'">
    <div class="basic-heading">
        <!--<span class="show-fixed">{{detail.name}}</span> {{detail.symbol | postSymbolTrim}}-->
    </div>
    <table class="header-table flex-header">
        <div class="header-line">
            <div class="left-part">
                <span class="heading">{{detail.name}}</span>
                <span colspan="2" class="heading-symbol">{{detail.symbol | postSymbolTrim}}</span>
            </div>
            <div class="right-part">
                <mini-addstock [placement]="'default'" [stockSource]="addStockSource"></mini-addstock>
            </div>
        </div>
        <div class="header-line">
            <span style="align-self: baseline" class="change" [class.up]="detail.change_amount > 0" [class.down]="detail.change_amount < 0" [ngClass]="getColorClass(detail.change_amount, 0)">{{getFieldToShow('current',detail.current)}}<img src="/static/images/down.png" *ngIf="detail.change_amount < 0"><img src="/static/images/up.png" *ngIf="detail.change_amount > 0"></span>
            <span style="align-self: baseline" class="change-rate" [ngClass]="getColorClass(detail.change_amount, 0)">{{getFieldToShow('change_amount',detail.change_amount) + " " + getFieldToShow('change_rate',detail.change_rate)}}</span>
        </div>
    </table>
    <!--指数详情-->
    <table class="basic-table" *ngIf="marketType==='index'">
        <tr class="table-row">
            <td class="table-cell">最高价</td>
            <td class="table-cell value-cell" [ngClass]="getColorClass(detail.high, detail.pre_close)">{{getFieldToShow('high',detail.high)}}</td>
            <td class="table-cell">开盘价</td>
            <td class="table-cell value-cell" [ngClass]="getColorClass(detail.open, detail.pre_close)">{{getFieldToShow('open',detail.open)}}</td>
            <td class="table-cell">量
                <div class="blank"></div>比</td>
            <td class="table-cell value-cell">{{getFieldToShow('vol_ratio',detail.vol_ratio)}}</td>
        </tr>
        <tr class="table-row">
            <td class="table-cell">最低价</td>
            <td class="table-cell value-cell" [ngClass]="getColorClass(detail.low, detail.pre_close)">{{getFieldToShow('low',detail.low)}}</td>
            <td class="table-cell">昨收价</td>
            <td class="table-cell value-cell">{{getFieldToShow('pre_close',detail.pre_close)}}</td>
            <td class="table-cell">委
                <div class="blank"></div>比</td>
            <td class="table-cell value-cell">{{getFieldToShow('entrust_rate',detail.entrust_rate)}}</td>
        </tr>
        <tr class="table-row divider-row">
            <td class="table-cell">成交额</td>
            <td class="table-cell value-cell">{{getFieldToShow('balance',detail.balance)}}</td>
            <td class="table-cell">换手率</td>
            <td class="table-cell value-cell">{{getFieldToShow('turnover_ratio',detail.turnover_ratio)}}</td>
        </tr>
        <tr class="table-row">
            <td class="table-cell">成交量</td>
            <td class="table-cell value-cell">{{getFieldToShow('volume',detail.volume)}}</td>
            <td class="table-cell">振
                <div class="blank"></div>幅</td>
            <td class="table-cell value-cell">{{getFieldToShow('amplitude',detail.amplitude)}}</td>
        </tr>
    </table>
    <!--板块详情-->
    <table class="basic-table" *ngIf="marketType==='block'">
        <tr class="table-row">
            <td class="table-cell">最高价</td>
            <td class="table-cell value-cell" [ngClass]="getColorClass(detail.high, detail.pre_close)">{{getFieldToShow('high',detail.high)}}</td>
            <td class="table-cell">开盘价</td>
            <td class="table-cell value-cell" [ngClass]="getColorClass(detail.open, detail.pre_close)">{{getFieldToShow('open',detail.open)}}</td>
            <td class="table-cell">成交额</td>
            <td class="table-cell value-cell">{{getFieldToShow('balance',detail.balance)}}</td>
        </tr>
        <tr class="table-row">
            <td class="table-cell">最低价</td>
            <td class="table-cell value-cell" [ngClass]="getColorClass(detail.low, detail.pre_close)">{{getFieldToShow('low',detail.low)}}</td>
            <td class="table-cell">昨收价</td>
            <td class="table-cell value-cell">{{getFieldToShow('pre_close',detail.pre_close)}}</td>
            <td class="table-cell">成交量</td>
            <td class="table-cell value-cell">{{getFieldToShow('volume',detail.volume)}}</td>
        </tr>
    </table>
    <!--个股详情-->
    <table class="basic-table" *ngIf="marketType==='stock'">
        <tr class="table-row">
            <td class="table-cell">最高价</td>
            <td class="table-cell value-cell" [ngClass]="getColorClass(detail.high, detail.pre_close)">{{getFieldToShow('high',detail.high)}}</td>
            <td class="table-cell">开盘价</td>
            <td class="table-cell value-cell" [ngClass]="getColorClass(detail.open, detail.pre_close)">{{getFieldToShow('open',detail.open)}}</td>
            <td class="table-cell">涨停价</td>
            <td class="table-cell value-cell color-red">{{getFieldToShow('up_price',detail.up_price)}}</td>
        </tr>
        <tr class="table-row">
            <td class="table-cell">最低价</td>
            <td class="table-cell value-cell" [ngClass]="getColorClass(detail.low, detail.pre_close)">{{getFieldToShow('low',detail.low)}}</td>
            <td class="table-cell">昨收价</td>
            <td class="table-cell value-cell">{{getFieldToShow('pre_close',detail.pre_close)}}</td>
            <td class="table-cell">跌停价</td>
            <td class="table-cell value-cell color-green">{{getFieldToShow('down_price',detail.down_price)}}</td>
        </tr>
        <tr class="table-row divider-row">
            <td class="table-cell">量
                <div class="blank"></div>比</td>
            <td class="table-cell value-cell">{{getFieldToShow('vol_ratio',detail.vol_ratio)}}</td>
            <td class="table-cell">换手率</td>
            <td class="table-cell value-cell">{{getFieldToShow('turnover_ratio',detail.turnover_ratio)}}</td>
            <td class="table-cell">市盈率</td>
            <td class="table-cell value-cell">{{getFieldToShow('PE',detail.PE)}}</td>
        </tr>
        <tr class="table-row">
            <td class="table-cell">涨
                <div class="blank"></div>幅</td>
            <td class="table-cell value-cell" [ngClass]="getColorClass(detail.change_rate, 0)">{{getFieldToShow('change_rate',detail.change_rate)}}</td>
            <td class="table-cell">振
                <div class="blank"></div>幅</td>
            <td class="table-cell value-cell">{{getFieldToShow('amplitude',detail.amplitude)}}</td>
            <td class="table-cell">市净率</td>
            <td class="table-cell value-cell">{{getFieldToShow('pb',detail.pb)}}</td>
        </tr>
        <tr class="table-row divider-row">
            <td class="table-cell">外
                <div class="blank"></div>盘</td>
            <td class="table-cell value-cell color-red">{{getFieldToShow('amount_out',detail.amount_out)}}</td>
            <td class="table-cell">成交额</td>
            <td class="table-cell value-cell">{{getFieldToShow('balance',detail.balance) | decimal }}</td>
        </tr>
        <tr class="table-row">
            <td class="table-cell">内
                <div class="blank"></div>盘</td>
            <td class="table-cell value-cell color-green">{{getFieldToShow('amount_in',detail.amount_in)}}</td>
            <td class="table-cell">成交量</td>
            <td class="table-cell value-cell">{{getFieldToShow('volume',detail.volume)}}</td>
        </tr>
        <tr class="table-row">
            <td class="table-cell">流通市值</td>
            <td class="table-cell value-cell">{{getFieldToShow('circulation_value',detail.circulation_value) | decimal }}</td>
            <td class="table-cell">总市值</td>
            <td class="table-cell value-cell">{{getFieldToShow('market_value',detail.market_value) | decimal }}</td>
        </tr>
    </table>
</div>
<!--模拟交易页面详情-->
<div class="wrapper vtrade-wrapper" *ngIf="place==='vtrade'">
    <div class="heading top-table">
        <span class="detail-heading">
      <!--<td class="symbol">{{detail.symbol | postSymbolTrim}}</td>-->
      <td class="symbol">{{detail.symbol}}</td>
      <td class="name">{{detail.name}}</td>
      <td class="change" [class.up]="detail.change_amount > 0" [class.down]="detail.change_amount < 0" [ngClass]="getColorClass(detail.change_amount, 0)">
          {{getFieldToShow("current", detail.current)}}
      </td>
      <td class="change-amount" [class.up]="detail.change_rate > 0" [class.down]="detail.change_rate < 0" [ngClass]="getColorClass(detail.change_rate, 0)">
        {{getFieldToShow("change_amount", detail.change_amount)}}
      </td>
      <td class="change-rate" [class.up]="detail.change_rate > 0" [class.down]="detail.change_rate < 0" [ngClass]="getColorClass(detail.change_rate, 0)">
        {{getFieldToShow("change_rate", detail.change_rate)}}
      </td>
      <i class="fa fa-chevron-down" *ngIf="!isShowMore" (click)="toggleDetail(true)"></i>
      <i class="fa fa-chevron-up" *ngIf="isShowMore" (click)="toggleDetail(false)"></i>
    </span>
        <mini-addstock [placement]="'vtrade'" [stockSource]="addStockSource"></mini-addstock>
    </div>
    <div class="bottom-wrapper" [class.active]="isShowMore">
        <div class="basic-right-wrapper">
            <table class="basic-table">
                <tr>
                    <td class="table-cell">最高</td>
                    <td class="table-cell value-cell" [ngClass]="getColorClass(detail.high, detail.pre_close)">{{detail.high || "-"}}</td>
                    <td class="table-cell">量比</td>
                    <td class="table-cell value-cell">{{detail.vol_ratio || "-"}}</td>
                    <td class="table-cell">外盘</td>
                    <td class="value-cell color-red">{{(detail.amount_out | optimizeUnit) || "-"}}</td>
                    <td class="table-cell">流通市值</td>
                    <td class="value-cell">{{(detail.circulation_value | optimizeUnit) || "-"}}</td>
                </tr>
                <tr>
                    <td class="table-cell">最低</td>
                    <td class="table-cell value-cell" [ngClass]="getColorClass(detail.low, detail.pre_close)">{{detail.low || "-"}}</td>
                    <td class="table-cell">振幅</td>
                    <td class="table-cell value-cell">{{detail.amplitude || "-"}}</td>
                    <!--<td class="table-cell">委比</td>
          <td class="table-cell value-cell">{{detail.entrust_ratio || "-"}}</td>-->
                    <td class="table-cell">内盘</td>
                    <td class="value-cell color-green">{{(detail.amount_in | optimizeUnit) || "-"}}</td>
                    <td class="table-cell">成交额</td>
                    <td class="value-cell">{{(detail.balance | optimizeUnit) || "-"}}</td>
                </tr>
                <tr>
                    <td class="table-cell">开盘</td>
                    <td class="table-cell value-cell" [ngClass]="getColorClass(detail.open, detail.pre_close)">{{detail.open || "-"}}</td>
                    <td class="table-cell">换手</td>
                    <td class="table-cell value-cell">{{detail.turnover_ratio || "-"}}%</td>
                    <td class="table-cell">市盈</td>
                    <td class="table-cell value-cell">{{detail.PE || "-"}}</td>
                    <td class="table-cell">成交量</td>
                    <td class="value-cell">{{(detail.volume | optimizeUnit) || "-"}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<!--文字直播内连详情-->
<div class="wrapper stock-detail-tiny" *ngIf="place==='textinline'">
    <table class="top-table">
        <tr class="heading">
            <td>{{detail.name}}({{detail.symbol | postSymbolTrim}})</td>
        </tr>
    </table>
    <div class="bottom-wrapper">
        <table class="header-table">
            <tr>
                <td class="change" [class.up]="detail.change_amount > 0" [class.down]="detail.change_amount < 0" [ngClass]="getColorClass(detail.change_amount, 0)">
                    {{detail?.current || "-"}}
                </td>
                <td class="change-rate" [class.up]="detail.change_rate > 0" [class.down]="detail.change_rate < 0" [ngClass]="getColorClass(detail.change_rate, 0)">
                    {{detail?.change_amount}}
                </td>
                <td class="change-rate" [class.up]="detail.change_rate > 0" [class.down]="detail.change_rate < 0" [ngClass]="getColorClass(detail.change_rate, 0)">
                    {{detail?.change_rate}}%
                </td>
            </tr>
        </table>
    </div>
    <!--<div class="button-wrapper">
    <mini-addstock [placement]="'liveinline'" [stockSource]="addStockSource"></mini-addstock>
  </div>-->
</div>
<!--直播间页面详情-->
<div class="wrapper teacher-detail" *ngIf="place==='live'">
    <div class="heading top-table">
        <span class="detail-heading">
      <td class="change" [class.up]="detail.change_amount > 0" [class.down]="detail.change_amount < 0" [ngClass]="getColorClass(detail.change_amount, 0)">
          {{getFieldToShow("current", detail.current)}}
      </td>
      <td class="change-amount" [class.up]="detail.change_rate > 0" [class.down]="detail.change_rate < 0" [ngClass]="getColorClass(detail.change_rate, 0)">
        {{getFieldToShow("change_amount", detail.change_amount)}}
      </td>
      <td class="change-rate" [class.up]="detail.change_rate > 0" [class.down]="detail.change_rate < 0" [ngClass]="getColorClass(detail.change_rate, 0)">
        {{getFieldToShow("change_rate", detail.change_rate)}}
      </td>
      <i class="fa fa-chevron-down" *ngIf="!isShowMore" (click)="toggleDetail(true)"></i>
      <i class="fa fa-chevron-up" *ngIf="isShowMore" (click)="toggleDetail(false)"></i>
    </span>
    </div>
    <div class="bottom-wrapper" [class.active]="isShowMore">
        <div class="basic-right-wrapper">
            <table class="basic-table">
                <tr>
                    <td class="table-cell">最高</td>
                    <td class="table-cell value-cell" [ngClass]="getColorClass(detail.high, detail.pre_close)">{{getFieldToShow('high',detail.high)}}</td>
                    <td class="table-cell">开盘</td>
                    <td class="table-cell value-cell" [ngClass]="getColorClass(detail.open, detail.pre_close)">{{getFieldToShow('open',detail.open)}}</td>
                    <td class="table-cell">成交额</td>
                    <td class="value-cell">{{getFieldToShow('balance',detail.balance)}}</td>
                </tr>
                <tr>
                    <td class="table-cell">最低</td>
                    <td class="table-cell value-cell" [ngClass]="getColorClass(detail.low, detail.pre_close)">{{getFieldToShow('low',detail.low)}}</td>
                    <td class="table-cell">换手</td>
                    <td class="table-cell value-cell">{{getFieldToShow('turnover_ratio',detail.turnover_ratio)}}</td>
                    <td class="table-cell">成交量</td>
                    <td class="value-cell">{{getFieldToShow('volume',detail.volume)}}</td>
                </tr>
            </table>
        </div>
    </div>
</div>